<script setup>
import { listProcessData } from '@/api/data.js'
const data = ref({
  value1: {
    num: 0,
    status: '',
    value: '',
  },
  value2: {
    num: 0,
    status: '',
    value: '',
  },
  value3: {
    num: 0,
    status: '',
    value: '',
  },
  value4: {
    num: 0,
    status: '',
    value: '',
  },
})
onMounted(() => {
  function getData() {
    listProcessData(3).then((res) => {
      data.value = JSON.parse(res.rows[0].data)
    })
  }
  getData()
  setInterval(getData, import.meta.env.VITE_APP_INTERVAL)
})
</script>
<template>
  <div class="center-top">
    <DataItem
      title="茶叶总产量(吨)"
      :number="data.value1.num"
      :type="data.value1.status"
      :value="data.value1.value"
    />
    <DataItem
      title="名优茶产量(吨)"
      :number="data.value2.num"
      :type="data.value2.status"
      :value="data.value2.value"
    />
    <DataItem
      title="加工主体(个)"
      :number="data.value3.num"
      :type="data.value3.status"
      :value="data.value3.value"
    />
    <DataItem
      title="省级以上龙头企业(个)"
      :number="data.value4.num"
      :type="data.value4.status"
      :value="data.value4.value"
    />
  </div>
</template>
<style lang="scss" scoped>
.center-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
